<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>Tables - Ace Admin</title>

		<meta name="description" content="Static &amp; Dynamic Tables" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="/lib/ace/css/bootstrap.min.css" />
		<link rel="stylesheet" href="/lib/ace/font-awesome/4.5.0/css/font-awesome.min.css" />

		<!-- page specific plugin styles -->

        <!-- layui -->
        <link rel="stylesheet" href="/lib/layui/css/layui.css">

		<!-- text fonts -->
		<link rel="stylesheet" href="/lib/ace/css/fonts.googleapis.com.css" />

		<!-- ace styles -->
        <link rel="stylesheet" href="/lib/ace/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="/lib/ace/css/ace-part2.min.css" class="ace-main-stylesheet" />
		<![endif]-->
		<link rel="stylesheet" href="/lib/ace/css/ace-skins.min.css" />
		<link rel="stylesheet" href="/lib/ace/css/ace-rtl.min.css" />

		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="/lib/ace/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->
		<script src="/lib/ace/js/ace-extra.min.js"></script>

		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="/lib/ace/js/html5shiv.min.js"></script>
		<script src="/lib/ace/js/respond.min.js"></script>
		<![endif]-->
	</head>

	<body>

    <div class="main-container ace-save-state" id="main-container">
        <div class="main-content">
            <div class="main-content-inner">
                <div class="page-content">
                    <div class="row" id="app">
                        <div class="col-xs-12">
                            <div class="table-header">
                                <div style="font-size: 18px">
                                    用户列表 &nbsp;&nbsp;
                                    <a href="javascript:void(0)" data-toggle="modal" data-target="#ManagerForm">
                                        <span class="glyphicon glyphicon-plus-sign" style="font-size: 16px; color:salmon"></span>
                                    </a>
                                </div>
                            </div>

                            <div>
                                <table id="simple-table" class="table  table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>序号</th>
                                            <th>姓名</th>
                                            <th>邮箱</th>
                                            <th>电话</th>
                                            <th>状态</th>
                                            <th>备注</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        <tr v-for="(item ,i) in list" :key="item.id">
                                            <th v-cloak>{{ i + num }}</th>
                                            <td v-cloak>{{item.username}}</td>
                                            <td v-cloak>{{item.mail}}</td>
                                            <td v-cloak>{{item.telephone}}</td>
                                            <td v-cloak>{{item.status | statusFormat}}</td>
                                            <td v-cloak>{{item.remark}}</td>
                                            <td>
                                                <div class="hidden-sm hidden-xs btn-group">
                                                    <button class="btn btn-xs btn-info">
                                                        <i class="ace-icon fa fa-pencil bigger-120"></i>
                                                    </button>

                                                    <button class="btn btn-xs btn-danger">
                                                        <i class="ace-icon fa fa-trash-o bigger-120"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!--分页-->
                    <div class="am-u-sm-12 am-u-end base-ad">
                        <ul class="am-pagination am-pagination-centered" id="page">
                            <li class="am-disabled"></li>
                        </ul>
                    </div>

                    <!-- 表单 -->
                    <div class="modal fade" id="ManagerForm" tabindex="-1" role="dialog" aria-labelledby="ManagerFormLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="ManagerFormLabel">用户添加</h4>
                                </div>
                                <div class="modal-body">

                                    <form class="form-horizontal" role="form">
                                        <div class="form-group">

                                            <label class="col-sm-4 control-label no-padding-right" >
                                                <span style="color: red;">*</span>用户名:
                                            </label>

                                            <div class="col-sm-5">
                                                <input type="text" required placeholder="请输入用户名" class="col-sm-12" />
                                            </div>
                                        </div>

                                        <div class="form-group">

                                            <label class="col-sm-4 control-label no-padding-right" >
                                                <span style="color: red;">*</span>邮箱:
                                            </label>

                                            <div class="col-sm-5">
                                                <input type="text" required placeholder="请输入邮箱" class="col-sm-12" />
                                            </div>
                                        </div>

                                        <div class="form-group">

                                            <label class="col-sm-4 control-label no-padding-right" >
                                                <span style="color: red;">*</span>电话:
                                            </label>

                                            <div class="col-sm-5">
                                                <input type="text" required placeholder="请输入电话" class="col-sm-12" />
                                            </div>
                                        </div>

                                        <div class="form-group">

                                            <label class="col-sm-4 control-label no-padding-right" >
                                                <span style="color: red;">*</span>状态:
                                            </label>

                                            <div class="col-sm-5">
                                                <select class="form-control">
                                                    <option value="">请选择状态</option>
                                                    <option value="1">有效</option>
                                                    <option value="0">冻结</option>
                                                    <option value="2">删除</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group">

                                            <label class="col-sm-4 control-label no-padding-right" >
                                                备注:
                                            </label>

                                            <div class="col-sm-5">
                                                <textarea class="form-control"></textarea>
                                            </div>
                                        </div>
                                    </form>

                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" id="brand_submit">立即提交</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

		<!-- basic scripts -->

		<!--[if !IE]> -->
		<script src="/lib/ace/js/jquery-2.1.4.min.js"></script>

		<!-- <![endif]-->

		<!--[if IE]>
            <script src="/lib/ace/js/jquery-1.11.3.min.js"></script>
        <![endif]-->

		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='/lib/ace/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="/lib/ace/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->

        <!-- layui-->
        <script src="/lib/layui/layui.js"></script>

		<!-- ace scripts -->
		<script src="/lib/ace/js/ace-elements.min.js"></script>
        <script src="/lib/ace/js/ace.min.js"></script>

        <!--vue-->
        <script src="/lib/vue/vue.js"></script>

        <!--bootstrap分页-->
        <script src="/lib/bootstrap/js/bootstrap-paginator.js"></script>
        
        <!-- 自己 js -->
        <script src="/js/manager.js"></script>
	</body>
</html>
